<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>欢迎来到家有书画</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/userInfo/xuserInfo.css">
  <link rel="stylesheet" href="./css/orderManage/xorderManage.css">
</head>

<body>
  <header class="fix-top">
    <ul class="inline-ul" id="title">
      <li class="active" data-change="#bidding">竞拍中</li>
      <li data-change="#over">已结束</li>
    </ul>
  </header>
  <div class="container" style="position:relative; top: 40px;">
    <section id="bidding">
      <ul class="list-group my-list-group">
        <li class="list-group-item">
          <a href="#" class="goods-title">
              <span>2016-12-12</span>
            </a>
          <a href="#">
            <div class="good-content">
              <div class="goods-img">
                <img src="./img/logo/goods-ex.png">
              </div>
              <div class="goods-desc">
                <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
              </div>
              <div class="goods-status text-12px">
                <div class="goods-status-img"><span>竞拍中</span></div>
              </div>
            </div>
          </a>
          <!-- <div class="goods-foot text-right">
            <p class="text-12px">我的出价<strong><span class="text-14px">100</span></strong> 
              当前最高<strong><span class="text-14px">500</span></strong></p>
          </div> -->
          <div class="goods-foot text-right">
            <button class="btn btn-default btn-sm">取消竞拍</button>
            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#payMoney">继续加价</button>
          </div>
        </li>
      </ul>
    </section>
    <section style="display: none" id="over">
      <ul class="list-group my-list-group">
        <li class="list-group-item">
          <a href="#" class="goods-title">
              <span>2016-12-12</span>
            </a>
          <a href="#">
            <div class="good-content">
              <div class="goods-img">
                <img src="./img/logo/goods-ex.png">
              </div>
              <div class="goods-desc">
                <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
              </div>
              <div class="goods-status text-12px">
                <div class="goods-status-img over"><span>已结束</span></div>
              </div>
            </div>
          </a>
          <div class="goods-foot text-right">
            <button class="btn btn-default btn-sm">删除记录</button>
          </div>
        </li>
      </ul>
    </section>
  </div>
  <script src="./lib/jquery/jquery.min.js"></script>
  <script>
    $(function() {
      $('#title').on('click', 'li', function () {
        //切换显示当前激活标签标题
        $(this).addClass('active');
        $(this).siblings().removeClass('active')
        //切换显示当前激活标签页
        var target = $(this).attr('data-change');
        $(target).show();
        $(target).siblings().hide();
      })
    })
  </script>
</body>

</html>